import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'

import ActionSheet from '@components/actionSheet'
import SingItem from '@components/singList'

import diaryApi from '@api/recommend'
import searchApi from '@api/search'

import myVideo from '@assets/images/myVideo.png'

import './index.scss'

class Diary extends Component {
  constructor(props) {
    super(props)
    this.state = {
      singList: [],
      openEd: false,
      ballTop: '500px',
      songInfo: {},
      touchS: [],
      touchM: []
    }
  }

  config = {
    navigationBarTitleText: '每日推荐',
    navigationBarTextStyle: 'black',
    navigationBarBackgroundColor: '#F0F0F0',
    backgroundTextStyle: 'light',
    enablePullDownRefresh: false,
    disableScroll: true
  }

  componentDidMount () {
    // diaryApi.diary().then(res => {
    //   this.setState({
    //     singList: res.songs[0]
    //   })
    // })
    const paramsObj = {
      keywords: '魔鬼',
      limit: 20
    }
    searchApi.searchResult(paramsObj).then(res => {
      this.setState({
        singList: res.result.songs
      })
    })
  }

  // 查看更多
  handleMore (item) {
    this.setState({
      openEd: true
    })
    searchApi.songDetail({ids: item.id}).then(res => {
      this.setState({
        songInfo: res.songs[0]
      })
    })
  }
  
  // 处理sheet
  hiddenSheet () {
    this.setState({
      openEd: !this.state.openEd
    })
  }

  touchStart (event) {
    let sx = event.touches[0].pageX
    let sy = event.touches[0].pageY
    this.setState({
      touchS: [sx, sy]
    })
  }

  touchmove (event) {
    let sx = event.touches[0].pageX
    let sy = event.touches[0].pageY
    if (sy < 60 || sy > 500) {
      return false
    }
    this.setState({
      touchM: [sx, sy]
    })
  }

  touchend () {
    let start = this.state.touchS
    let end = this.state.touchM
    console.log(start[1])
    console.log(end[1])
    if (end[1] < 60 || end[1] > 500) {
      return false
    }
    this.setState({
      ballTop: `calc(100vh - ${end[1]}rpx)`,
    })
  }

  render() {
    return (
      <View className='diary'>
        <View className='diary-list'
          style={{height: this.state.ballTop}}
          onTouchStart={this.touchStart.bind(this)}
          onTouchMove={this.touchmove.bind(this)}
          onTouchEnd={this.touchend.bind(this)}
        >
          <View className='at-row at-row__align--center top-operate'>
            <View className='at-col at-col-11'>
              <Image src={myVideo} className='my-video' />
              <Text className='play-all'>播放全部</Text>
            </View>
            <View className='at-col at-col-1'>
              
            </View>
          </View>
          <ScrollView
            className='scroll-view'
            scrollY
            scrollWithAnimation
          >
            {
              this.state.singList.map((item, index) => {
                return (
                  <SingItem 
                    key={item + index}
                    singInfo={item}
                    onMore={this.handleMore.bind(this)}
                  />
                )
              })
            }
          </ScrollView>
        </View>
        <ActionSheet
          isOpened={this.state.openEd}
          onHidden={this.hiddenSheet.bind(this)}
          songInfo={this.state.songInfo}
        />
      </View>
    )
  }
}
 
export default Diary
